<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>共享屏幕</title>
  <style>
    * {
      box-sizing: border-box;
    }

    #video {
      margin: 20px;
      background: deepskyblue;
      display: block;
      border-radius: 2px;
      box-shadow: 0 1px 1.5px 1px rgba(0, 0, 0, 0.12);
      width: 640px;
      height: 480px;
    }
  </style>
</head>
<body>
<video id="video" autoplay width="640" height="480">start record</video>
<button id="snapshot">截图</button>
<script>
  const $video = document.querySelector('#video');
  const $snapshot = document.querySelector('#snapshot');
  var $canvas = document.createElement('canvas');

  function startMediaDisplay () {
    navigator.mediaDevices.getUserMedia({ video: true, audio: false })
      .then((stream) => $video.srcObject = stream);
  }

  function snapshotClick () {
    const ctx = $canvas.getContext('2d');
    $canvas.width = 640;
    $canvas.height = 480;

    console.log($video.width, $video.height);
    ctx.drawImage($video, 0, 0, $video.width, $video.height);

    document.body.appendChild($canvas);
  }

  startMediaDisplay();
  $snapshot.onclick = snapshotClick;
</script>
</body>
</html>
